<template>
    <div>
      <i class="iconfont" @click="deleteGoods">&#xe62d;</i>
      <section class="pl10">
        <header class="mt20">
          <p class="f16">{{good.nam}}</p>
          <p v-if="good.selectedGoods.length > 1" class="tr f13" @click="showMoreGuige()">{{text}}</p>
        </header>
        <ul>
          <li class="mt20" v-if="good.selectGuige">
            <p class="f12" style="color: #F95318">￥<span class="f18">{{good.originalprice}}</span></p>
            <p class="pl5 f14" style="line-height: 27px">{{good.selectGuige}}</p>
            <add-decrsde-button :good="good" @addMount="getMounts"></add-decrsde-button>
          </li>
          <li class="mt20" v-for="(guige,key) in good.selectedGoods" :key="guige.index"  v-if = "key < num">
            <p class="f12" style="color: #F95318">￥<span class="f18">{{good.originalprice}}</span></p>
            <p class="pl5 f14" style="line-height: 27px">{{guige.guige}}</p>
            <add-decrsde :good="guige" @moreSpecificat="getMoreSpecificat"></add-decrsde>
          </li>
        </ul>
      </section>
    </div>
</template>

<script type="ECMAScript 6">
    import addDecrsde from '@/components/add-decrsde-list';
    import addDecrsdeButton from '@/components/add-decrsde';
    export default {
        name: 'common-list-sorts',
        components: {
          addDecrsde,
          addDecrsdeButton
        },
        props: {
          goods: {
                type: Object,
                defaults: ''
          }
        },
        data () {
          return {
            num: 1,
            good: this.goods,
            text: '其它规格',
            isShow: true
          };
        },
        methods: {
          deleteGoods () {
            console.log('删除');
          },
          showMoreGuige () {
            this.isShow = !this.isShow;
            this.num = this.isShow ? 1 : this.good.selectedGoods.length;
            this.text = this.isShow ? '其它规格' : '收起';
          },
          getMounts (index) {
              this.setMoreSpecificatMounst(index);
          },
          getMoreSpecificat (index) {
             this.setMoreSpecificatMounst(index);
          },
          // 设置规格数对应的数量
          setMoreSpecificatMounst () {
            this.goods.forEach (goodsCounst => {
              this.$set(goodsCounst, 'counts', 0);
              goodsCounst.selectedGoods.forEach (guigeCounst => {
                this.$set(guigeCounst, 'guigeCounst', 0)
              });
            });
            console.table(this.goods);
          }
        },
        create () {
          this.setMoreSpecificatMounst();
        }
    };
</script>

<style lang="stylus" scoped>
  div
    display flex;
    i
      margin-top: 31px;margin-left: 13px;font-size: 23px;line-height: 100%;
    section
      flex 1;
      header
        display flex; aligin-items center;
        p
          flex 1;
    ul
      li
        position relative; display flex; padding-bottom: 16px;border-bottom: 1px solid #E9E9E9;
</style>
